<!DOCTYPE html>
<html>
<head>
	<title><?php echo $list_title;?></title>
	<meta name="viewport" content="width=device-width,user-scalable=no" />
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
<style type="text/css">
	*{ margin: 0; padding: 0; }
	body,html{ margin: 0; padding: 0; font-size: 14px; }
	ul ,li{ margin: 0; padding: 0; list-style: none; }
	body{ max-width: 6640px; width: 100%; min-height: 100%; background-color: #f5f5f5;padding-top: 37px; -webkit-appearance: none; }
	a, input { margin: 0; padding: 0; outline: none; -webkit-tap-highlight-color: rgba(255, 0, 0, 0);  }
input { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-modify: read-write-plaintext-only; -webkit-appearance: none; }

	.search{ width: 100%; height: 47px; position: fixed; top: 0; left: 0 ;background-color: #f5f5f5;}
	.cancel{ position: absolute; right: 4%;line-height: 37px;margin-top: 6px; font-size: 13px; }
	.search_inpuit{ width: 96%; height: 1.1rem;
    padding: 1.1rem 0; margin-left: 2%; margin-top: 7px; border: 1px solid #e5e5e5; border-radius: 1px; font-size: 14px; outline: none; background-image: url(<?php echo $this->config->item('public_url');?>/Feedback/images/search.png); background-size: 15px; background-position: 10px 9px; background-repeat: no-repeat; text-indent: 30px; position: relative; z-index: 5;}
	.title_s{ height: 39px; line-height: 39px; border-bottom: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5; color: #737373; background-color: #fff; margin-top: 10px; text-indent: 3%;}

	.content_s{  text-align: center; color: #343434;   background-color: #fff; width: 98%; padding: 0 1%;padding-top: 17px; height: auto ; overflow: hidden;border-bottom: 1px solid #e5e5e5; }
	.content_s a{color: #343434; text-decoration: none; width: 100%; height: 100%; overflow: hidden; display: block;}
	.content_s li{ width: 25%; float: left; margin-bottom: 18px;min-height: 80px;}
	.content_s p{ width: 100%; margin-top: 5px;  font-size: 13px;}
	.c_img{ width: 26px; height: 26px; padding:5px;   border-radius: 50%; overflow: hidden; display: table; margin: 0 auto;}
	.c_img img{ width: 100%; height: 100%;  }
	.content_list{ padding-left: 3%; width:94%;padding-right: 3%;  background-color: #fff; height: auto; overflow: hidden; }
	.content_list a{color: #343434; text-decoration: none; width: 100%; height: 100%; overflow: hidden; display: block;}
	.content_list li{border-bottom: 1px solid #e5e5e5;padding: 10px 0;line-height: 22px;}
	.loading{ width: 100%; line-height: 35px; text-align: center; }


	@media screen and (min-width: 400px) {
		body { padding-top: 42px; }
	   .search_inpuit{ padding: 1.3rem 0;    background-position: 10px 11px; }
	   .cancel{ margin-top: 8px; }
	}
</style>
</head>
<body >
<div class="search">
	<input type="search" class="search_inpuit" placeholder="<?php echo $feedback_search_content;?>">
	<span class="cancel"><?php echo $feedback_countermand;?></span>
</div>
<div class="content" id="content">
<?php if (!empty($result['other']) && !empty($stair_one)){
    
        foreach ($stair_one as $val){
?>
	<div class="title_s"><?php echo $val['name'];?></div>
	<div class="content_s">
		<ul>
		<?php foreach ($result['other'] as $ckey=>$cval){
		    $category_id_len = strlen($cval['category_id']);
		    $result_category_id = substr($cval['category_id'], 0,3);
		    if (($result_category_id == $val['category_id']) && $category_id_len == 6){
		?>
			<li>
				<a href="<?= site_url('h5/Feedback/feedbackview?language='.$language.'&category_id='.$cval['category_id'].'&information='.$information)."&name=".$cval['name']?>">
					<?php if ($cval['image'] == ''){
					    $cval['image'] = "https://app-image-cdn.ninebot.cn/qa-defalt.png";
					}
					?>
					<div class="c_img"><img src = "<?php echo $cval['image'];?>" /></div>
					<p><?php echo $cval['name']?></p>
				</a>
			</li>
		<?php }}?>
		</ul>
	</div>
<?php }}?>
</div>
<div  id="content_list" style=" display: none">
	<div class="content_list">
		<ul>
			
		</ul>
		<div class="loading">loading···</div>
	</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
	
</script>
<script type="text/javascript">
	$('.search_inpuit').focus(function(event) {
		$(this).css({
			"width":"82%"
		})
		$('#content').hide()
	});
	$('.cancel').click(function(event) {
		$('.search_inpuit').css({
			"width":"96%"
		})
		$('#content').show()
		$('#content_list').hide()
		$('.search_inpuit').val('')
	});

	var url ='/h5/Feedback/search_lst';
	var loading_all = "<?php echo $loading_all;?>";
	
	$(".search_inpuit").bind('input propertychange', function() {
		var content = $('.search_inpuit').val()
		$('#content_list').show()
		if (content) {
			$.ajax({
				url: url,
				type: 'GET',
				data: {content: content},
			})
			.done(function(data) {
				var data = jQuery.parseJSON(data);
				var html=""
				$('.content_list ul').html('')
				for (var i = 0; i < data.data.length; i++) {
					var href_url = "<?= site_url('h5/question_answer/Index/detail?language=')?>";
					href = href_url + data.data[i].language + '&category_id=' + data.data[i].category_id;
					html+='<li><a href="'+href+'">'+data.data[i].title+'</a></li>'
				}
				$('.content_list ul').append(html)
				if (data.data.length<=10) {
					$('.loading').html(loading_all)
				}
			})
			.fail(function() {
				console.log("error");
			})
		}
	
	})

	// loading  加载
	var stop = true;
	var page = 2;
	$(window).scroll(function() {
		var content = $('.search_inpuit').val()
		var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
		if ($(document).height() <= totalheight) {
			if (stop == true) {
				stop = false;
				$.ajax({
					url: url,
					type: 'get',
					data: {
						content: content,
						page:page
					},
					success: function(data) {
						var data = jQuery.parseJSON(data);
						var html=""
						for (var i = 0; i < data.data.length; i++) {
							html+='<li><a href="">'+data.data[i].title+'</a></li>'
						}
						$('.content_list ul').append(html)
						stop = true;
						page++;
						if (data.data.length == 0) {
							$(".Loading").html(loading_all);
							stop = false;
						} else {
							$(".Loading").html("Loading...");
						}
					},
					error:function(xhr, textStatus){

					}
				})
			}
		}
	});


</script>
</body>
</html>